import React from "react";
import { Button, Checkbox, Form, Input } from 'antd';
import http from '../utils/http'
import { useNavigate } from "react-router-dom";
import styles from './login.module.css';
const PLogn = () => {
  const navigate = useNavigate();
  const [form] = Form.useForm();
  const handelEnroll= async()=>{
    const {username,password}= form.getFieldsValue()
    const params={username,password}
    await http.post(`/login`, params)
    navigate('/login')
  }
  return (
    <div className={styles.loginContainer}>
      <div className={styles.loginHeader}>
        <h1 className={styles.loginTitle}>注册账号</h1>
        <p className={styles.loginSubtitle}>创建您的新账号</p>
      </div>
      <Form
        form={form}
        initialValues={{ remember: true }}
      >
        <Form.Item
          name="username"
          rules={[{ required: true, message: '请输入您的账号!' }]}
        >
          <Input placeholder="请输入账号" className={styles.formInput} />
        </Form.Item>

        <Form.Item
          name="password"
          rules={[{ required: true, message: '请输入您的密码!' }]}
        >
          <Input.Password placeholder="请输入密码" className={styles.formInput} />
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" className={styles.loginButton} onClick={()=>{handelEnroll()}}>
            注册
          </Button>
        </Form.Item>
      </Form>
      
      <div className={styles.bottomLinks} style={{position: 'fixed', bottom: '30px', textAlign:'center'}}>
        已有账号？
        <a className={styles.linkText} onClick={() => { navigate('/login') }}>返回登录</a>
        <a className={styles.linkText} onClick={() => { navigate('/plogin') }}>短信登录</a>
      </div>
    </div>
  );
};

export default PLogn;